<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="fragment/globalComponent::commonHead(~{::title},~{::link},~{::style})">
    <title>GoblinCwl - 编辑文章</title>
    <link th:href="@{/css/manager.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/plugins/editormd/css/editormd.css}">
    <style>
        /*隐藏小地图*/
        #map {
            display: none;
        }

        /*隐藏editor源码框*/
        #article {
            display: none;
        }

        /*标题样式*/
        #blogTitle {
            border: solid 2px #666;
            border-radius: 0;
            padding: 0.05rem 0.5rem;
            width: 30rem;
        }

        /*多选框样式*/
        .editBlog-select-btn {
            border-radius: 0;
            border: 2px solid #666666;
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;
        }

        /*多选框搜索输入框样式*/
        input.form-control {
            border-radius: 0;
            border: 2px solid #666;
            padding: 0;
            height: 1.5rem;
        }

        /*多选框focus*/
        .bootstrap-select > select.mobile-device:focus + .dropdown-toggle, .bootstrap-select .dropdown-toggle:focus {
            outline: none !important;
            border: 2px solid #666666;
            box-shadow: none !important;
        }

        /*本页面显示滚动条*/
        ::-webkit-scrollbar {
            display: block; /* Chrome Safari */
        }

        html body div {
            scrollbar-width: auto; /* firefox */
            -ms-overflow-style: auto; /* IE 10+ */
        }

        /*未选择元素的时候是文本，对其*/
        .filter-option-inner-inner {
            font-size: 0.94rem;
        }

    </style>
</head>
<body>

<!-- 页面内容 -->
<div id="editormd">
    <label for="article"></label>
    <textarea id="article" name="article"></textarea>
</div>

</body>
<div th:replace="fragment/globalComponent::commonFoot(~{::script})">
    <script th:src="@{/js/goblincwl/tablePage.js}" type="text/javascript"></script>
    <script th:src="@{/plugins/editormd/editormd.min.js}"></script>
    <script>
        let editorMd;

        $(function () {
            ajaxHttp({
                type: "GET",
                url: ctx + "/blog/query/" + $.getUrlParam("id"),
                success: function (res) {
                    if (res.data != null) {
                        $("#article").html(res.data.content);
                        initOptions(res.data.title, res.data.tabsArray);
                    }
                },
                successFalse: function () {
                    initOptions('', null);
                }
            })
        })

        /*获取下拉框数据*/
        function initOptions(title, tabsArray) {
            ajaxHttp({
                method: 'GET',
                url: ctx + '/blog/blogTabs/list',
                data: {
                    pageSize: 100
                },
                success: function (resTabs) {
                    let optionsHtml = '';
                    if (resTabs.data != null) {
                        for (let i = 0; i < resTabs.data.records.length; i++) {
                            const row = resTabs.data.records[i];
                            let html = "" +
                                "<option ";
                            if ($.inArray(row.id, tabsArray) !== -1) {
                                html += "selected ";
                            }
                            html += "data-content=\"" + "" +
                                "<span class='badge' style='background-color: " + row.color + "'>" + row.name + "</span>\"" +
                                " value='" + row.id + "'>" + row.name + "</option>";
                            optionsHtml += html;
                        }
                    }
                    //加载editorMd
                    initEditorMd(title, optionsHtml);
                },
            })
        }

        function initEditorMd(title, optionsHtml) {
            editorMd = editormd("editormd", {
                width: "100%",                  //宽度
                autoHeight: true,               //高度（自动）
                syncScrolling: "single",
                path: "/plugins/editormd/lib/", //依赖库
                tex: true,                      // 开启科学公式TeX语言支持，默认关闭
                flowChart: true,                // 开启流程图支持，默认关闭
                sequenceDiagram: true,          // 开启时序/序列图支持，默认关闭,
                imageUpload: true,
                imageFormats: ["jpg", "JPG", "jpeg", "JPEG", "gif", "GIF", "png", "PNG", "bmp", "BPM", "webp", "WEBP"],
                imageUploadURL: "/manager/ossFile/editorMdUploadFile?storagePath=blogs",
                toolbarIcons: function () {     //自定义工具栏
                    return [
                        "undo", "redo",
                        "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase",
                        "|", "list-ul", "list-ol", "hr",
                        "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "datetime",
                        "|", "watch", "preview",
                        "||", "tabs", "title", "submit"
                    ]
                },
                toolbarIconsClass: {            //自定义按钮图标
                    submit: "fa-check"
                },
                toolbarCustomIcons: {
                    title: "<input id='blogTitle' class='required' type='text' pos='b'" +
                        "   placeholder='请输入文章标题' oninput='inputValidate($(this))'/>",
                    tabs: "" +
                        "<select id='editorSelect' " +
                        "   multiple " +
                        "   data-live-search='true' " +
                        "   data-width='fit'" +
                        "   data-size='5' " +
                        "   data-style='editBlog-select-btn'" +
                        "   title='选择标签'" +
                        "   data-selected-text-format='count > 5'" +
                        ">" +
                        optionsHtml +
                        "</select>",
                },
                toolbarHandlers: {              //自定义按钮事件
                    submit: function (cm, icon, cursor, selection) {
                        //校验标题
                        const $title = $("#blogTitle");
                        if (inputValidate($title)) {
                            const winId = xtip.confirm('确认保存文章？', function () {
                                const id = $.getUrlParam("id");
                                let url;
                                let method;
                                if (id == null || id === "") {
                                    url = "/blog/add";
                                    method = 'POST';
                                } else {
                                    url = "/blog/edit";
                                    method = 'PUT';
                                }

                                //发布文章
                                ajaxHttp({
                                    type: method,
                                    url: ctx + url,
                                    data: {
                                        id: id,
                                        title: $title.val(),
                                        content: editorMd.getMarkdown(),
                                        shortContent: getSimpleText(editorMd.getPreviewedHTML()).substr(0, 100) + ' ...',
                                        tabsArray: $("#editorSelect").val()
                                    },
                                    winId: winId,
                                    success: function (res) {
                                        const selfId = self.frameElement.getAttribute('parentid');
                                        //关闭窗口
                                        parent.xtip.close(selfId);
                                        //提示信息
                                        parent.xtip.msg(res.msg, {icon: 's', type: 'w'})
                                        //刷新表格
                                        parent.$("#" + $.getUrlParam("tableId")).bootstrapTable('refresh');
                                    }
                                })
                            }, {icon: ['', '#62c462']});
                        }
                    }
                },
                onload: function () {           //加载完毕时
                    //加载标题
                    $("#blogTitle").val(title)
                    //加载下拉框
                    $("#editorSelect").selectpicker()
                    //自动全屏
                    editorMd.fullscreen()
                }
            });

        }


    </script>
</div>
</html>